<template>
<div>
  <div>
<el-select v-model="value" placeholder="请选择" style="width:100px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-input v-model='input' placeholder="请输入内容" style="width:200px"></el-input>
  <el-button type="success" icon="el-icon-search" style="width: 120px" @click="queryMaster(value,input)"
      >搜索</el-button
    >
  <el-button type="primary" style="width:120px;float:right" @click="onhandAdd()">添加宠物</el-button>
  </div>
  <el-table
    :data="tableData"
    border
    style="width: 100%" >
    <el-table-column
      fixed
      prop='petName'
      label="名字"
      width="150">
    </el-table-column>
    <el-table-column
      prop='petRace'
      label="品种"
      width="100">
    </el-table-column>
    <el-table-column
      prop='petType'
      label="种类"
      width="100">
    </el-table-column>
    <el-table-column
      prop='petColor'
      label="颜色"
      width="100">
    </el-table-column>
    <el-table-column
      prop='petBirthday'
      label="出生日期"
      width="300">
    </el-table-column>
    <el-table-column
      prop='petCharacter'
      label="性格"
      width="120">
    </el-table-column>
    <el-table-column
      label="操作"
      width="260">
            <template slot-scope="scope">

        <el-button
          size="mini"
          type="info"
          icon="el-icon-search"
          style="width:70px;"
          @click="onhandupdata(scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-search"
          style="width:70px;"
         @click.prevent="deleteRow( scope.row)">删除</el-button>
            </template>
    </el-table-column>
  </el-table>
  <!-- 新增编辑弹框 -->
   <el-dialog
        :title="selectById"
        :visible.sync="dialogVisible"
        width="40%"
        >
        <el-form
            :model="pet"
            ref="refRuleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
           
    <el-form-item label="姓名" prop="id" style="width:200px;">
    <el-input v-model="pet.petName"></el-input>
  </el-form-item>
    <el-form-item label="品种">
    <el-input v-model="pet.petRace"></el-input>
  </el-form-item>
    <el-form-item label="种类">
    <el-input v-model="pet.petType"></el-input>
  </el-form-item>
    <el-form-item label="颜色">
    <el-input v-model="pet.petColor"></el-input>
  </el-form-item>
    <el-form-item label="出生日期">
    <el-input v-model="pet.petBirthday"></el-input>
  </el-form-item>
   <el-form-item label="性格">
    <el-input v-model="pet.petCharacter"></el-input>
  </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="add()">确定添加</el-button>
            <el-button type="primary" @click="updata()">确定修改</el-button>
        </span>
        </el-dialog>
  </div>
</template>
<script>
import {getPet} from'@/services/PetServive.js'
import {deletePet} from'@/services/PetServive.js'
import {addPet} from'@/services/PetServive.js'
import {updataPet} from'@/services/PetServive.js'
export default {
  data() {
      return {
        tableData: [],
         options: [{
          value: '1',
          label: '昵称'
        }, {
          value: '2',
          label: '真实姓名'
        }, {
          value: '3',
          label: '手机号'
        }],
        value:"",
        index:"",
        input:'',
        masterId:1,
        selectById:"添加宠物",
        dialogVisible:false,
        pet:{
            petId:"",
          petName:"",
          petRace:"",
          petType:"",
          petColor:"",
          petBirthday:"",
          petCharacter:"",
          
        }
      }
    },
    methods:{
        async deleteRow(row){
            console.log(row.petId)
             this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(async () => {
          let resp = await deletePet(row.petId);

          if (resp.data === true) {
            location.reload();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

        },
        onhandAdd(){
            this.dialogVisible=true
        },
     async add() {
    var resp = await addPet(this.pet,this.masterId);
    this.dialogVisible=false;
    console.log(this.pet);
   if (resp.data === true) {
             location.reload();
            this.$message.success("添加成功");
          } else {
            this.$message.error("添加失败");
          }
   },
    async onhandupdata(row){
        this.dialogVisible=true;
        console.log("=======================")
        
       this.pet=row
       console.log(this.pet)
    },
    async updata() {
    var resp = await updataPet(this.pet);
    this.dialogVisible=false;
    console.log(this.pet);
   if (resp.data === true) {
             location.reload();
            this.$message.success("修改成功");
          } else {
            this.$message.error("修改失败");
          }
   },
    },
     async created() {
    var resp = await getPet(this.value,this.input,this.masterId);
    console.log(resp);
    this.tableData = resp.data;
    //this.chooseId = this.channels[0].channelId
    // this.switchChannel(this.channels[0].channelId)
    
  },
}
</script>